<template>
  <el-dialog
    :title="form.id ? lang.t('common.update') : lang.t('common.create')"
    v-model="show"
    :width="1000"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
      <el-row :gutter="30">
        <el-col :span="16">
          <Permission v-model:permission="form.permission" v-model:plugin="form.plugin" />
        </el-col>
        <el-col :span="8">
          <el-form-item :label="lang.t('page.user.account.name')" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item :label="lang.t('page.user.account.phone')" prop="phone">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item :label="lang.t('page.user.account.username')" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item :label="lang.t('page.user.account.password')" prop="password">
            <div style="width: 100%; overflow: hidden">
              <Password ref="passwordRef" @over="value => form.password = value" />
            </div>
          </el-form-item>
          <el-form-item :label="lang.t('page.user.account.status')" prop="status">
            <div style="width: 100%; overflow: hidden">
              <el-select v-model="form.status">
                <el-option
                  v-for="(status, index) in lang.tm('page.user.account.status_text')"
                  :key="index"
                  :label="status"
                  :value="index">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="onUpdate">{{ form.id ? lang.t('common.update') : lang.t('common.create') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref, nextTick } from 'vue'
import app from '@/app'
import accountModel from '@/model/user/account'

import Password from '@/components/password'
import Permission from './permission'

export default {
  components: {
    Password,
    Permission
  },
  setup() {
    // 对话框
    const show = ref(false)
    // 密码框
    const passwordRef = ref(null)

    // 打开
    const open = async(data) => {
      // 合并前置数据
      form.value = Object.assign({
        plugin: [],
        permission: [],
      }, data)
      show.value = true

      // 等待渲染完成
      await nextTick()
      passwordRef.value.empty()
    }

    // 表单
    const formRef = ref(null)
    const form = ref({})

    // 验证
    const rules = {
      name: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      username: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      status: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
    }

    // 更新
    const loading = ref(false)
    const onUpdate = () => {
      formRef.value.validate(valid => {
        if (valid) {
          loading.value = true
          accountModel.update(form.value).then(() => {
            show.value = false
          }).finally(() => {
            loading.value = false
          })
        }
      })
    }

    return {
      lang: app.lang,
      passwordRef,
      show,
      open,
      formRef,
      form,
      rules,
      loading,
      onUpdate
    }
  }
}
</script>